<template>
  <div>
    <!-- list-type="picture-card" 指定文件列表类型 text  picture  picture-card
         action 必选参数，上传的地址 action的值是上传的地址, 只要写上对应的地址, 上传图片会自动以post的方式向这个地址中传递数据
         file-list 指定文件列表的 [{url: 'xxx'}, {url: 'xxx'}]
         on-preview 点击已上传的文件触发的钩子, 预览
         :limit="数字" 显示上传图像的数量
         :on-remove 文件列表中文件移除时触发的钩子
         :http-request 覆盖默认上传行为
         :before-upload 上传文件之前的处理函数
         :on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePreview"
      :limit="limit"
      :class="{'my-upload': isHide}"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :before-upload="beforeUpload"
      :on-change="handleChange"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 图片预览的对话框 -->
    <el-dialog
      title="图像预览"
      :visible="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
    >
      <img :src="url" alt="" width="100%">
    </el-dialog>

  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
// 创建腾讯云实例
var cos = new COS({
  SecretId: 'AKIDviHciaDbmkSu62mGUUEDxRfdMq44uVu4',
  SecretKey: 'xe6IDtJTXTGrFNHvJQHsDI6g290bTBgw'
})
export default {
  props: {
    // 父组件动态控制限制上传的数量
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 文件列表
      fileList: [
        // { url: 'https://img1.baidu.com/it/u=3755297117,609162545&fm=26&fmt=auto' }
        // { url: 'https://img1.baidu.com/it/u=1088598474,2202214857&fm=26&fmt=auto' }
      ],
      dialogVisible: false, // 图像预览对话框的布尔值
      url: '' // 预览图像的地址
      // limit: 2 // 限制上传的数量
    }
  },
  computed: {
    // 控制my-upload类名是否渲染的布尔值
    isHide() {
      return this.limit <= this.fileList.length
    },
    isAllSuccess() {
      // console.log(this.fileList)
      // 所有的上传的文件都是上传成功的状态返回true
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    // 图像预览
    handlePreview(file) { // file就是点击的图像信息对象
      // console.log(file.url)
      // 1. 将对话框控制的布尔值设置为true
      this.dialogVisible = true
      // 2. 将点击图像的地址赋值给url
      this.url = file.url
    },
    // 移除文件触发的钩子
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      // file是删除的图像信息(对象) fileList剩余的文件列表(数组)
      // 将剩余的文件列表 赋值给 data中的fileList
      // this.fileList = [...fileList]
      const index = this.fileList.findIndex(item => item.uid === file.uid)
      this.fileList.splice(index, 1)
    },
    // 上传文件前做预校验函数
    beforeUpload(file) { // file上传的文件对象
      // console.log(file)
      // 文件类型的校验
      if (!['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)) {
        this.$message.error('请上传jpg/png/gif/bmp格式的图片')
        return false
      }
      // 文件大小的校验
      if (file.size / 1024 / 1024 > 2) {
        this.$message.error('请上传2M内大小的图片')
        return false
      }
      return true
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      // console.log(file, fileList) // fil是添加的文件对象, fileList是最新的文件列表数据
      this.fileList = [...fileList]
    },
    // 覆盖默认上传行为
    handleUpload({ file }) {
      // console.log(file) // 上传的文件对象
      const obj = this.fileList.find(item => item.uid === file.uid)
      cos.putObject({
        Bucket: 'hrsaas-1305579172', /* 必须 存储桶名称*/
        Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
        Key: +new Date() + file.name, /* 必须唯一 上传的文件的名称 字符串格式*/
        StorageClass: 'STANDARD',
        Body: file, // 上传文件对象
        onProgress: (progressData) => { // 文件在上传期间会持续触发的函数
          console.log(progressData)
          // 1. 将上传期间图像进度条展示
          if (obj) {
            // 2. 展示进度条
            obj.status = 'uploading'
            // 3. 进度条的百分比
            obj.percentage = progressData.percent * 100
          }
        }
      }, (err, data) => { // 文件上传完成后触发的函数, 如果上传失败会有err, 成功的会拿到data
        if (err) return this.$message.error('上传失败请稍后重试')
        // const obj = this.fileList.find(item => item.uid === file.uid)
        if (obj) {
          // 1. 将上传成功后的图像的status状态有ready改成success
          obj.status = 'success'
          // console.log(data.Location)
          // 2. 将真正的腾讯云地址放在data中  --后期做回显的
          obj.url = 'https://' + data.Location
        }
        // console.log(data)
      })
      /*
      模拟 假设有上传的地址就可以直接发送上传的请求了
      const fm = new FormData()
        fm.append('img', config.file)
        axios({
          method: 'post',
          url: 'xxxx',
          data: fm
        }) */
    }
  }
}
</script>

<style lang="scss" scoped>
.my-upload {
  ::v-deep.el-upload--picture-card {
    display: none;
  }
}
</style>
